import React from 'react';
import { Row, Col, Collapse, message } from 'antd';
import { SalaryCommLink } from '../containers/StatusDetailLink';
import { HireCard } from '../containers';
import { contactWayMap } from '../utils';
import { getCommunicateInfo } from '../../service';
import styles from './index.less';

const { Panel } = Collapse;

const Unit = ({ unitData }) => (
    <>
        <Row className={styles.infoRow}>
            <Col span={12}>
                <span className={styles.label}>联系方式：</span>
                <span className={styles.value}>{`${contactWayMap[unitData.contactWay]} ${unitData.contactInfo}`}</span>
            </Col>
            <Col span={12}>
                <span className={styles.label}>联系时间：</span>
                <span className={styles.value}>{`${unitData.contactTime}`}</span>
            </Col>
        </Row>
        <Row className={styles.infoRow}>
            <Col span={12}>
                <span className={styles.label}>联系人：</span>
                <span className={styles.value}>{`${unitData.contactName}`}</span>
            </Col>
        </Row>
        <Row className={styles.infoRow}>
            <Col span={24} style={{ display: 'flex' }}>
                <span className={styles.label}>沟通记录：</span>
                <span className={styles.value}>{`${unitData.remark}`}</span>
            </Col>
        </Row>
    </>
);

const SalaryCard = ({ recruitStatus, employId, candidateId, employApply }) => {
    const [data, setData] = React.useState([]);
    const getData = async () => {
        const res = await getCommunicateInfo(employId);
        if (res.code === 10000) {
            if (res.data.length > 0) {
                setData(res.data);
            }
        } else {
            message.error(res.msg);
        }
    };

    React.useEffect(() => {
        if (recruitStatus > 1) {
            getData();
        }
    }, [recruitStatus]);

    const reachAgreement = {
        text: '达成共识',
        color: '#44c69d',
        background: '#ecfff7',
        link: params => <SalaryCommLink params={params} />
    };

    const failInfo = {
        text: '已淘汰',
        color: 'rgba(0,0,0,0.45)',
        background: 'rgba(0, 0, 0, 0.05)',
        link: data.length > 0 ? params => <SalaryCommLink params={params} /> : () => {}
    };

    return (
        <>
            <HireCard
                title="薪资沟通记录"
                recruitStatus={recruitStatus}
                linkParams={{ employId, candidateId }}
                successFootInfo={recruitStatus > 2 ? reachAgreement : ''}
                failInfo={!employApply.hiDataId && recruitStatus === 10 ? failInfo : ''}
            >
                <div className={styles.infoContent} style={{ paddingTop: 0 }}>
                    {data.length === 0 && <div className={styles.greyWord}>暂未沟通</div>}
                    {data.length === 1 && (
                        <div style={{ marginTop: '16px' }}>
                            <Unit unitData={{ ...data[0].recruitContactRecordVO, remark: data[0].remark }} />
                        </div>
                    )}
                    {data.length === 2 && (
                        <Collapse expandIconPosition="right" bordered={false} defaultActiveKey={['1']}>
                            <Panel header="二次薪资沟通" key="1">
                                <Unit unitData={{ ...data[0].recruitContactRecordVO, remark: data[0].remark }} />
                            </Panel>
                            <Panel header="首次薪资沟通" key="2">
                                <Unit unitData={{ ...data[1].recruitContactRecordVO, remark: data[1].remark }} />
                            </Panel>
                        </Collapse>
                    )}
                </div>
            </HireCard>
        </>
    );
};

export default SalaryCard;
